<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>电影管理</el-breadcrumb-item>
      <el-breadcrumb-item>电影列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="searchFomr" class="demo-form-inline">
      <el-form-item label="电影名称">
        <el-input
          v-model="searchFomr.movieName"
          placeholder="请输入电影名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线  列表页面-->
    <el-divider></el-divider>
    <!-- 电影列表 -->
    <div v-if="tableData">
      <el-table :data="tableData.result" stripe style="width: 100%">
        <el-table-column align="center" prop="cover" label="封面" width="180">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 100px"
              :src="scope.row.cover"
              fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="电影名称">
        </el-table-column>
        <el-table-column align="center" prop="type" label="类型" width="180">
        </el-table-column>
        <el-table-column align="center" prop="star_actor" label="主演">
        </el-table-column>
        <el-table-column
          align="center"
          prop="showingon"
          label="上映时间"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="duration"
          label="电影时长"
          width="180">
          <template slot-scope="scope">{{ scope.row.duration }} 分钟</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="category_id"
          label="所属类别"
          width="180"
          ><template slot-scope="scope"
            >{{ scope.row.categoryId }}
            <el-tag type="danger" v-if="scope.row.category_id == 1"
              >热映</el-tag
            >
            <el-tag v-if="scope.row.category_id == 2">待映</el-tag>
            <el-tag type="success" v-if="scope.row.category_id == 3"
              >经典</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              type="info"
              icon="el-icon-user"
              circle
              @click="showEditActorDialog(scope.row.id)"
              title="配置演员列表"></el-button>
            <el-button
              type="success"
              icon="el-icon-picture-outline"
              circle
              title="配置剧照列表"
              @click="showEditThumbDialog(scope.row.id)"></el-button>
            <el-button
              @click="$router.push(`/home/movie-update/${scope.row.id}`)"
              type="warning"
              icon="el-icon-edit"
              title="修改电影信息"
              circle></el-button>
            <el-button
              @click="deleteMovie(scope.row.id)"
              type="danger"
              title="删除电影信息"
              icon="el-icon-delete"
              circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="changeCurrentPage"
        style="margin: 20px 0; text-align: right"
        background
        layout="prev, pager, next"
        :total="tableData.total"
        :page-size="tableData.pagesize">
      </el-pagination>
    </div>
    <!-- 设置修改剧照弹出框 -->
    <el-dialog title="配置剧照图片" :visible.sync="dialogThumbVisible">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://localhost:9000/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-success="handleSuccess"
        :auto-upload="false"
        multiple>
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          @click="$router.push('/home/thumb-list/' + currentSelectId)"
          >管理剧照图片</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
    <!-- 配置演员列表窗口 -->
    <el-dialog title="配置演员列表" :visible.sync="dialogEditActorVisible">
      <el-transfer
        v-model="transferValue"
        :data="transferData"
        :titles="['未选择演员', '已选择演员']">
      </el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditActorVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitActors()">确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 原始数据
      transferData: [],
      // 选中项数据
      transferValue: [],
      // 绑定显示修改演员窗口
      dialogEditActorVisible: false,
      // 绑定选中项的电影id
      currentSelectId: 0,
      // 绑定上传文件列表
      fileList: [],
      // 是否显示修改剧照窗口
      dialogThumbVisible: false,
      searchFomr: {
        movieName: "", //绑定电影名称
      },
      tableData: null,
    }
  },
  methods: {
    // 提交穿梭框收的数据
    submitActors() {
      let movie_id = this.currentSelectId
      let actor_ids = this.transferValue.toString()
      this.$http.MovieApi.bindActors({ movie_id, actor_ids }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("演员列表绑定完成")
          this.dialogEditActorVisible = false
        }
      })
    },
    // 显示修改演员列表窗口
    showEditActorDialog(id) {
      this.dialogEditActorVisible = true
      this.currentSelectId = id
      // 发送请求 获取当前电影下的所有演员
      this.$http.ActorApi.listByName({ movie_id: id }).then((res) => {
        console.log("获取当前电影下的演员", res)
        if (res.data.code == 200) {
          this.transferValue = []
          res.data.data.forEach((item) => {
            this.transferValue.push(item.actor_id)
          })
        }
      })
    },
    // 显示修改剧照对话框
    showEditThumbDialog(id) {
      this.dialogThumbVisible = true
      this.currentSelectId = id
    },
    // 处理上传成功后的结果
    handleSuccess(res) {
      console.log(res, "上传成功")
      let url = res.data
      let movie_id = this.currentSelectId
      this.$http.movieThumbApi.add({ url, movie_id }).then((res) => {
        console.log(res)
      })
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    // 修改当前页
    changeCurrentPage(val) {
      let name = this.searchFomr.movieName.trim()
      console.log(val)
      if (!name) {
        this.$http.MovieApi.list({ page: val, pagesize: 2 }).then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            this.tableData = res.data.data
          }
        })
      } else {
        this.$http.MovieApi.listByName({ name, page: val, pagesize: 2 }).then(
          (res) => {
            console.log(res)
            if (res.data.code == 200) {
              this.tableData = res.data.data
            }
          }
        )
      }
    },
    // 点击删除电影信息
    deleteMovie(id) {
      this.$http.MovieApi.delete({ id }).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.$message.success("删除成功")
          this.loadMovieList()
        }
      })
    },
    // 点击搜索按钮时执行
    onSearch() {
      let name = this.searchFomr.movieName.trim()
      // 如果name为空
      if (!name) {
        this.loadMovieList()
      } else {
        this.$http.MovieApi.listByName({ name, page: 1, pagesize: 2 }).then(
          (res) => {
            console.log(res)
            if (res.data.code == 200) {
              this.tableData = res.data.data
            }
          }
        )
      }
    },
    // 加载电影列表
    loadMovieList() {
      this.$http.MovieApi.list({ page: 1, pagesize: 2 }).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.tableData = res.data.data
        }
      })
    },
    // 加载所有演员
    loadAllActors() {
      this.$http.ActorApi.list({ page: 1, pagesize: 1000 }).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          let mdata = []
          res.data.data.forEach((item) => {
            mdata.push({ key: item.id, label: item.actor_name })
          })
          this.transferData = mdata
        }
      })
    },
  },
  mounted() {
    // 加载电影列表
    this.loadMovieList()
    // 加载所有演员
    this.loadAllActors()
  },
}
</script>
